<template>
    <ZZDialog class="mapSwipe" title="卷帘对比" @close="callbackClose()">
        <el-row :gutter="20">
            <el-col :span="18" :offset="2" style="margin-top: 10px;">
                左图层：<el-select
                    placeholder="请选择左侧图层"
                    v-model="leftLabel"
                    style="width: 150px"
                    @change="leftLayerChange"
                >
                    <el-option
                        v-for="item in selectAllData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-col>
            <el-col :span="18" :offset="2" style="margin-top: 10px;">
                右图层：<el-select
                    placeholder="请选择右侧图层"
                    style="width: 150px"
                    v-model="rightLabel"
                    @change="rightLayerChange"
                >
                <el-option
                        v-for="item in selectAllData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-col>
        </el-row>

    </ZZDialog>
</template>

<script>
import ZZDialog from '../../../common/ZZDialog.vue';

export default {
    components:{
        ZZDialog
    },
    data(){
        return{
            viewer:undefined,
            selectAllData:[
    {value:'bing_img',label:'Bing影像',type:'www_bing',layer: "AerialWithLabels"},
    {value:'bing_vec',label:'Bing电子街道',type:'www_bing',layer: "Roads"},
    {value:'baidu_img',label:'百度影像',type:'www_baidu',layer:'img_d'},
    {value:'baidu_vec',label:'百度电子地图',type:'www_baidu',layer:'vec'},
    {value:'gaode_img',label:'高德影像',type:'www_gaode',layer:'img_d'},
    {value:'gaode_vec',label:'高德电子地图',type:'www_gaode',layer:'vec'},
    {value:'google_img',label:'谷歌影像',type:'www_google',layer:'img_d'},
    {value:'google_vec',label:'谷歌电子地图',type:'www_google',layer:'vec'}
            ],
            leftLayer:null,
            rigthLayer:null,
            leftLabel:'',
            rightLabel:''
        }
    },
    beforeMount(){
        this.viewer = this.$store.state.viewer
    },
    methods:{
        leftLayerChange(type){
            this.leftLayer = this.viewer.imageryLayers.addImageryProvider(zz3d.layer.createImageryProvider({
                "type": this.selectAllData.find(item => item.value === type)?.type,
                "layer": this.selectAllData.find(item => item.value === type)?.layer,
            }));
            this.leftLayer.splitDirection = Cesium.ImagerySplitDirection.LEFT;
            this.viewer.scene.imagerySplitPosition = 0.5
        },
        rightLayerChange(type){
            this.rigthLayer = this.viewer.imageryLayers.addImageryProvider(zz3d.layer.createImageryProvider({
                "type": this.selectAllData.find(item => item.value === type)?.type,
                "layer": this.selectAllData.find(item => item.value === type)?.layer,
            })); 
            this.rigthLayer.splitDirection = Cesium.ImagerySplitDirection.RIGHT;
            this.viewer.scene.imagerySplitPosition = 0.5
        },
        callbackClose(){
            this.$emit('close')
            if(this.rigthLayer){
                this.viewer.imageryLayers.remove(this.rigthLayer)
            }
            if(this.leftLayer){
                this.viewer.imageryLayers.remove(this.leftLayer)
            }
            this.viewer.scene.imagerySplitPosition = 1
        }
    }
}

</script > 
<style scoped>
.mapSwipe {
    position: absolute;
    top: 100px;
    right: 200px;
    height: 150px;
    width: 290px;
}
</style>